import React,{Component} from 'react';
import { connect } from 'react-redux';
import styles from './document.scss';
import classnames from 'classnames/bind';
import {NoData,Footer,Header} from '../../components';
import {Input,Layout, Menu, Breadcrumb} from 'antd';
import axios from 'axios';
import {moduleName_CN} from '../../util';
import {API_ADDRESS} from '../../util/address';


let cx = classnames.bind(styles);
const {Content} = Layout;


class Document extends Component{
    constructor(props)
    {
        super(props);
        this.state={content:'',title:''}
    }
    async componentWillMount()
    {
        const moduleName=this.props.match.params.module;
        const question=this.props.match.params.question;
        const {data}=this.props
        for(let i=0,flag=0;i<data.length;i++)
        {
            if(data[i].modulename===moduleName)
            {
                for(let j=0;j<data[i].pages.length;j++)
                {
                    if(data[i].pages[j].contentid===question)
                    {
                        const {data}=await axios.get(`${API_ADDRESS}/getDoc?contentid=${question}`);
                        this.setState({content:data.content,title:data.title})
                        flag=1;
                        break;
                    }
                }
                if(flag)
                    break;
            }
        }

    }

    render()
    {
        const moduleName=this.props.match.params.module;
        const question=this.props.match.params.question;
        const go = this.props.history.push;
        const Search=Input.Search;
        return (
        <Layout className="layout">
        <Header go={go}/>
        <Content className={cx('content')}>
            {this.state.content?(
                <div className={cx('document')}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item onClick={()=>{go('/')}}>所有集合</Breadcrumb.Item>
                        <Breadcrumb.Item onClick={()=>{go('/'+moduleName)}}>{moduleName_CN[moduleName]}</Breadcrumb.Item>
                        <Breadcrumb.Item>{this.state.title}</Breadcrumb.Item>
                    </Breadcrumb>
                    <div style={{ minHeight: 650 }} className={cx('text')} dangerouslySetInnerHTML={{__html:this.state.content}} />
                </div>
                )
            :(<div className={cx('document')} style={{backgroundColor:'#fff'}}>
                <NoData tip='糟糕，问题已被移除或者管理员没有回答过这个问题'/>
             </div>)
            }
        </Content>
        {this.state.content?<Footer tips='微人事帮助中心'/>:''}
        </Layout>
        )
    }
};

export default connect(
    (state)=>({data:state.data})
)(Document)
